<template>
  <div class="tablePageWarp">
    <div class="table-page-search-wrapper commonSelectWidth">
      <a-form>
        <a-row :gutter="16">
          <!-- 用户须知 -->
          <a-col
            :md="6"
            :sm="24"
          >
            <a-form-item :colon="false">
              <a-select
                v-model="queryParam.type"
                showSearch
                allow-clear
                optionFilterProp="children"
                :filterOption="$commonFun.filterOption"
              >
                <a-select-option
                  v-for="(item,index) in additionalClauseTypeDictCode"
                  :key="index"
                  :value="item.value"
                  :title="item.name"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!-- 项目 -->
          <a-col
            :md="6"
            :sm="24"
          >
            <a-form-item :colon="false">
              <a-select
                v-model="queryParam.projectId"
                showSearch
                allow-clear
                optionFilterProp="children"
                :filterOption="$commonFun.filterOption"
              >
                <a-select-option
                  v-for="(item,index) in projectOptions"
                  :key="index"
                  :value="item.id"
                  :title="item.name"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col
            :lg="6"
            :sm="24"
            class="btnWarp"
          >
            <div class="searchBtns">
              <a-button @click="getTermsInfor">
                <i class="iconfont icon-chazhao"></i>
                {{ $t('inquiry') }}
              </a-button>
              <a-button @click="initiSelectValue">
                <i class="iconfont icon-qingkong"></i>
                {{ $t('clear') }}
              </a-button>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <quill-editor
      class="myQuillEditor"
      ref="myQuillEditor"
      v-model="content"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
    />
    <div style="margin-bottom:16px">
      <a-button
        type="primary"
        @click="saveTerms"
      >{{ $t('save') }}</a-button>
      <a-button
        style="margin-left:8px"
        @click="contentReset"
      >{{ $t('reset') }}</a-button>
    </div>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { mapState, mapGetters } from 'vuex'
import _ from 'lodash'

// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ['clean'] // 清除文本格式-----['clean']
  //   ['image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']
]

export default {
  components: { quillEditor },
  name: 'TermsSettings',
  data () {
    return {
      queryParam: {
        type: '1',
        projectId: ''
      },
      content: '',
      originContent: '', // 备份原内容
      termsInfor: {},
      editorOption: {
        //  富文本编辑器配置
        modules: {
          toolbar: toolbarOptions
        },
        theme: 'snow',
        placeholder: '请输入正文'
      }
    }
  },
  computed: {
    ...mapState({
      additionalClauseTypeDictCode: (state) => state.dict.additionalClauseTypeDictCode,
      projectOptions: (state) => state.project.myProjectAllData
    }),
    ...mapGetters(['myActiveProjectId'])
  },
  mounted () {
    this.queryParam.projectId = this.myActiveProjectId || this.projectOptions[0].id
    this.getSelectData()
  },
  methods: {
    initiSelectValue () {
      this.queryParam.type = '1'
      this.queryParam.projectId = this.myActiveProjectId || this.projectOptions[0].id
    },
    getSelectData () {
      if (this.additionalClauseTypeDictCode.length === 0) {
        this.$store.dispatch('getAdditionalClauseTypeDictCodeData').then(() => {
          this.queryParam.projectId = this.myActiveProjectId || this.projectOptions[0].id
        })
      }
      this.$store.dispatch('getMineProjectAllData')
      this.getTermsInfor()
    },
    // 获取条款信息
    getTermsInfor () {
      const vm = this
      vm.$api.termsInfor({ ...vm.queryParam }).then(res => {
        if (res.data) {
          vm.termsInfor = res.data
          vm.originContent = _.cloneDeep(res.data.content)
          vm.content = _.cloneDeep(res.data.content)
        } else {
          vm.termsInfor = {}
          vm.originContent = ''
          vm.content = ''
        }
      })
    },
    // 保存法规
    saveTerms () {
      const vm = this
      vm.$api.editTerms({ ...vm.queryParam, id: vm.termsInfor.id, content: vm.content }).then(res => {
        vm.originContent = _.cloneDeep(res) || ''
        vm.content = _.cloneDeep(res) || ''
      })
    },
    contentReset () {
      const vm = this
      vm.content = _.cloneDeep(vm.originContent)
    },
    onEditorBlur () {

    },
    onEditorFocus () {

    },
    onEditorReady () {

    }
  },
  watch: {
    content (val) {
      console.log(val)
    },
    'queryParam.projectId' () {
      this.getTermsInfor()
    }
  }
}
</script>
<style lang='less' >
.myQuillEditor {
  line-height: normal !important;
  flex: 1 0 0;
  .ql-container {
    height: calc(100% - 100px);
  }
}
.ql-snow .ql-tooltip[data-mode='link']::before {
  content: '请输入链接地址:';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: '保存';
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode='video']::before {
  content: '请输入视频地址:';
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
  content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
  content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
  content: '32px';
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
  content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
  content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
  content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
  content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
  content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
  content: '标题6';
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: '标准字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
  content: '衬线字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
  content: '等宽字体';
}
</style>
